Skip to main content

Testing and Linting

Testing and linting are essential parts of the development process to ensure that your code is working as expected and follows best practices. In this guide, we'll cover how to add and configure testing frameworks like Jest or Vitest, as well as how to set up ESLint and Prettier to maintain code quality and consistency.

1. Adding and Configuring Testing Frameworks​

Testing ensures that your code behaves as expected and helps to catch bugs early. Vite supports various testing frameworks out of the box, including Jest and Vitest. We will explore how to integrate these testing frameworks into your Vite project.

Vitest is a fast testing framework built for Vite and is the preferred choice for testing in Vite projects. It provides an excellent developer experience with support for modern JavaScript features, fast test execution, and built-in mocks.

First, install Vitest as a development dependency:

npm install --save-dev vitest @vitejs/plugin-vue

If you're using React, install the corresponding React testing library:

npm install --save-dev @testing-library/react

ii. Add a Test Script to package.json​

Next, add a test script to your package.json to run tests using Vitest.

"scripts": {
  "test": "vitest"
}

iii. Create Test Files​

Create test files with the .test.js or .test.ts extension, depending on whether you're using JavaScript or TypeScript.

For example, create a simple test file src/App.test.ts:

import { describe, it, expect } from 'vitest';

describe('App component', () => {
  it('should render correctly', () => {
    expect(true).toBe(true); // Add your actual test here
  });
});

iv. Run Tests​

Now you can run tests with:

npm run test

b. Installing Jest (Alternative to Vitest)​

If you prefer using Jest, a popular JavaScript testing framework, you can also integrate it into your Vite project.

i. Install Jest and Babel​

To use Jest, install the necessary dependencies:

npm install --save-dev jest @babel/preset-env @babel/preset-react babel-jest

ii. Configure Babel for Jest​

Create a .babelrc file in your project root:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

iii. Add Test Script to package.json​

Just like with Vitest, add a test script in your package.json:

"scripts": {
  "test": "jest"
}

iv. Create Test Files​

Create test files with the .test.js or .test.ts extension. For example, src/App.test.js:

describe('App component', () => {
  it('should render correctly', () => {
    expect(true).toBe(true); // Add your actual test here
  });
});

v. Run Jest Tests​

You can run Jest tests using the following command:

npm run test

2. Setting Up ESLint and Prettier for Code Quality​

ESLint and Prettier are essential tools for maintaining code quality and consistency in your project. ESLint helps catch potential issues and enforce coding standards, while Prettier automatically formats your code.

a. Installing ESLint​

To set up ESLint, first install it as a development dependency:

npm install --save-dev eslint

Next, initialize an ESLint configuration file:

npx eslint --init

Follow the prompts to configure ESLint according to your project requirements. For example:

  • Choose "To check syntax, find problems, and enforce code style."
  • Choose "JavaScript modules" or "TypeScript" depending on your project.
  • Select the style guide you'd like to follow (e.g., Airbnb, Standard).
  • Choose whether you want to use ESLint with or without a configuration file.

b. Configuring ESLint​

Once you've completed the initialization, you should have a .eslintrc.json or .eslintrc.js file. Here's an example of a basic .eslintrc.json file:

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "warn"
  }
}

This configuration:

  • Enables the browser, ES2021, and Node.js environments.
  • Extends ESLint's recommended rules and React's recommended rules.
  • Adds some custom rules like warnings for unused variables and console statements.

c. Installing Prettier​

Prettier automatically formats your code to ensure consistency. To install Prettier, run:

npm install --save-dev prettier

Create a .prettierrc file in your project root to customize Prettier’s behavior. Here's an example of a basic configuration:

{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "tabWidth": 2
}

This configuration:

  • Uses single quotes instead of double quotes.
  • Adds semicolons at the end of statements.
  • Adds trailing commas where possible.
  • Sets the tab width to 2 spaces.

d. Integrating ESLint and Prettier​

To integrate Prettier with ESLint, install eslint-config-prettier and eslint-plugin-prettier:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Then, update your ESLint configuration (.eslintrc.json) to extend Prettier:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "prettier",
    "plugin:prettier/recommended"
  ]
}

This ensures that ESLint and Prettier work together without conflicting rules.

e. Run ESLint and Prettier​

To run ESLint on your project, use:

npx eslint .

To format your code with Prettier, use:

npx prettier --write .

f. Automating Linting and Formatting with Git Hooks​

You can automate linting and formatting by setting up Git hooks using Husky and lint-staged.

i. Install Husky and lint-staged​

npm install --save-dev husky lint-staged

ii. Add Configuration to package.json​

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.js": "eslint --fix",
  "*.ts": "eslint --fix",
  "*.jsx": "eslint --fix",
  "*.tsx": "eslint --fix",
  "*.{js,ts,jsx,tsx}": "prettier --write"
}

This configuration ensures that before each commit, your code will be automatically linted and formatted.

3. Conclusion​

Setting up testing and linting in your Vite project improves code quality, ensures functionality, and maintains consistency throughout your project. Using Vitest or Jest allows you to write tests for your code, while ESLint and Prettier ensure that your code adheres to best practices and is properly formatted.

By configuring these tools, you can improve the maintainability and reliability of your project, making it easier to scale and collaborate with other developers.

Happy coding with Vite, testing, and linting!